<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

  <title></title>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=8" />
  <link href="styles/default.css" rel="stylesheet" type="text/css" />    
  <script type="text/javascript" src="jsolait/jsolait.js"></script>
  <script type="text/javascript" src="scripts/template.js"></script>
  <script type="text/javascript" src="scripts/login.js"></script>
  <script type="text/javascript" src="scripts/common.js"></script>
  <script type="text/javascript" src="sql/devicedal.js"></script>
  <script type="text/javascript" src="scripts/devicecodes.js"></script>

   <!--[if (lte IE 6)|(gte IE 8)]>
  <style type="text/css">
     #outer {height:100%;display:table;}
  </style>
  <![endif]-->

</head>

<body onload="InitDeviceCodesPage();">

<div id="outer">
    <div id="inner">
        <div id="header"></div>

        <div id="content">
           	<div id="columnB"></div>

        <!-- START PAGE CONTENT -->
        
        	<div id="columnA">
		    <h2>Device Codes</h2>
		    <table>
		    	<tr>
	            	<td colspan="4">
	                	<input type="button" id="btnAddDeviceCode" value="Add Device Code" onClick="AddDeviceCode()"/>
	                </td>
	          	</tr>	                    	      	
              <tr>
                <td colspan="4">
                <table cellpadding="0" cellspacing="0" width="650px" border="0">
                	<tr><td colspan="4"">
	                	<table cellpadding="0" cellspacing="0" class="containerDiv" width="100%" style="background-color: #F0F0F0;padding-left:20px;" border="0">	                			      		                
	                   	<tr>
	                    	<td class="labels" align="left" style="width:70px">Code</td>  
	                        <td align="left">  
					        	<input type="text" id="txtCode" class="inputText" style="width: 150px;"/> 
	                        </td>
	                        <td class="labels" align="left" style="width:70px">Model</td>
	                        <td align="left">  
					        	<input type="text" id="txtModel" class="inputText" style="width: 150px;"/> 
	                        </td>
	                        <td align="right" colspan="2">
	                        	<input type="button" id="btnSearch" value="Search" class="buttonFilter" onclick="Search()" />
	                        </td>
	                    </tr>
	                    <tr>    
	                        <td class="labels" align="left" style="width:70px">Company</td>
	                        <td align="left" colspan="4">  
					        	<input type="text" id="txtCompany" class="inputText" style="width: 150px;"/> 
	                        </td>	                    
						</tr>                
                		</table>
                	</td></tr>
                	<tr>
    	          		<td class="spacer" colspan="4"></td>                        
                	</tr>  
                    <tr>
                        <td> 
		                <table width="100%" border="0" class="tableHeader">
			                <tr>	
			    			    <td align="left" class="labels" style="color:#FFFFFF">
			    			        Items per page
			    			        <select id="ddlRowsPerPage" name="ddlRowsPerPage" class="dropdown" style="width: 50px;" onchange="Search()">
			                            <option value="10">10</option>
			                            <option value="25">25</option>
			                            <option value="50">50</option>
			                            <option value="100">100</option>
			                            <option value="200">200</option>
			                        </select>
									<span id="spnTotalNoOfRows"></span>
			                    </td>
			                    <td align="right">
			    				    <a id="anchorFirst">&lt;&lt;</a>&nbsp;
			    					<a id="anchorPrev">&lt;</a>&nbsp;
			    					<span id="spnPageNumber"></span>&nbsp;
			    					<a id="anchorNext">&gt;</a>&nbsp;
			    					<a id="anchorLast">&gt;&gt;</a>&nbsp;
			                    </td>
			                </tr>
		            	</table>                        
						                     
		                <div id="tblDeviceCodes" style="text-align: center;"></div>
		                <textarea id="devicecodes_jst" cols="0" rows="0" style="display:none;">
		                <table cellpadding="0" cellspacing="0" class="containerDiv" width="650px" align="left">
		                <tr>
			              <td colspan="4" align="left">
				            <table width="100%" cellpadding="0" cellspacing="0" border="0">
					            <tr>								
						            <td class="tableSubHeader" style="width: 100px;" align="center"><a href="javascript:ChangeOrderBy(1)" class="white">Code<span id="col1"></span></a></td>
						            <td class="tableSubHeader" style="width: 250px;" align="left"><a href="javascript:ChangeOrderBy(2)" class="white">Model<span id="col2"></span></a></td>
    					            <td class="tableSubHeader" style="width: 250px;" align="left"><a href="javascript:ChangeOrderBy(3)" class="white">Company<span id="col3"></span></a></td>
    					            <td class="tableSubHeader" style="width: 50px;" align="center">&nbsp;</td>
					            </tr>
            					
                                {for dc in devicecodes}
            					
					            <tr>
						            <td class="${dc.cellClass}" style="width: 100px;" align="center">${dc.DeviceCode}</td>
						            <td class="${dc.cellClass}" style="width: 250px;" align="left">${dc.Model}</td>
						            <td class="${dc.cellClass}" style="width: 250px;" align="left">${dc.Company}</td>
						            <td class="${dc.cellClass}" style="width:  50px;" align="center">${dc.DeleteLink}</td>
            		            </tr>
                        		
            		            {/for}
								
								<tr>	
            		    			<td class="tableHeader" colspan="4">&nbsp;</td>							
								</tr>
				            </table>	
 			              </td>
    		            </tr>
    		            </table>
		                </textarea>  
        	            </td>
                    </tr>
                </table>
                </td>
            </tr>
	        <tr>
			    <td class="spacer" colspan="4"></td>
		    </tr>
		    </table>
		
		  	</div>
		  	
        <!-- END PAGE CONTENT -->

        </div>
    </div>
</div>

<div id="footer"></div>

</body>
</html>
